<template>
  <div id="JorLibraryDet">
    <div style="display: flex">
      <el-scrollbar>
        <div class="left-tree">
          <div class="careeTree">
            <div class="careeTreeHead f14">全部职业</div>
            <el-tree
              empty-text="暂无数据"
              v-loading="treeLoading"
              style="max-width: 260px"
              :data="treeData"
              node-key="code"
              :default-expanded-keys="expandedKeys"
              :props="defaultProps"
              @node-click="handleNodeClick"
            >
              <template #default="{ node, data }">
                <div
                  @click="handleTreeName(node, data)"
                  class="custom-tree-node"
                  :class="{
                    treeActive:
                      node.data.code == jorPorpData.code ||
                      node.data.code == jorPorpData.jobCode,
                  }"
                >
                  {{ node.data.name }}
                </div>
              </template>
            </el-tree>
          </div>
        </div>
      </el-scrollbar>
      <el-scrollbar class="right-contaier">
        <div>
          <div class="like-box df">
            <div class="left">
              <h1>
                {{ jorPorpData.name || jorPorpData.jobName || '-' }}({{
                  jorPorpData.code || jorPorpData.jobCode || '-'
                }})
              </h1>
              <div class="df">
                <div
                  class="mt15 f14"
                  style="color: #999"
                  v-for="(item, index) in foundItem"
                  :key="item.name"
                >
                  {{ item.name
                  }}<span
                    v-if="index !== foundItem.length - 1"
                    style="margin: 0 5px"
                    >>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- v-if="!isChildrenJorShow" -->
          <div class="tabs-box" style="margin-top: 20px">
            <div class="tabs">
              <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane
                  :label="isMyShowType == 2 ? '岗位概述' : '职业概述'"
                  name="zhiyegaishu"
                >
                  <div
                    v-if="isMyShowType != 2"
                    :style="isShow ? 'height:150px' : 'height:100%'"
                    style="
                      /* height: 150px; */
                      overflow: hidden;
                      position: relative;
                      margin-top: 30px;
                    "
                  >
                    <div
                      v-html="jorDetailsData.desc"
                      style="color: #666; white-space: pre-wrap"
                      class="desc f14"
                    ></div>
                    <div
                      class="read-more"
                      v-show="isShow"
                      @click="handleRedaMore"
                    >
                      阅读更多
                    </div>
                    <div
                      v-show="!isShow"
                      class="curr"
                      style="text-align: center; margin-top: 20px"
                      @click="handleRedaMore"
                    >
                      收起
                    </div>
                  </div>

                  <div v-show="isShow">
                    <div>
                      <div><mytitlebar title="专业要求" /></div>
                      <div class="df" style="justify-content: space-between">
                        <div style="width: 45%">
                          <careertable
                            :careerTableData="firstMajor"
                            :title="majorTitle"
                            :type="1"
                          />
                        </div>
                        <div style="width: 45%">
                          <careertable
                            :careerTableData="twoMajor"
                            :title="majorTitle"
                            :type="1"
                          />
                        </div>
                      </div>
                    </div>

                    <div>
                      <div><mytitlebar title="学历要求" /></div>
                      <div class="df" style="justify-content: space-between">
                        <picChart :eduNeed="jorDetailsData.eduNeed" />
                        <barChart :eduNeed="jorDetailsData.eduNeed" />
                      </div>
                    </div>

                    <div>
                      <div><mytitlebar title="人才需求" /></div>
                      <div style="margin: 20px 0 10px 0">各省市招聘统计</div>
                      <div class="df" style="justify-content: space-between">
                        <div style="width: 45%">
                          <careertable
                            :careerTableData="firstPro"
                            :title="porTitle"
                            :type="2"
                          />
                        </div>
                        <div style="width: 45%">
                          <careertable
                            :careerTableData="twoPro"
                            :title="porTitle"
                            :type="2"
                          />
                        </div>
                      </div>
                    </div>

                    <div>
                      <div><mytitlebar title="招聘企业" /></div>
                      <div
                        class="df"
                        style="justify-content: space-between; width: 100%"
                      >
                        <div style="width: 45%">
                          <div style="margin: 20px 0 10px 0">招聘企业类型</div>
                          <div>
                            <careertable
                              :careerTableData="jorDetailsData.companyType"
                              :type="3"
                            />
                          </div>
                        </div>

                        <div style="width: 45%">
                          <div style="margin: 20px 0 10px 0">优质招聘企业</div>
                          <careertable
                            :careerTableData="jorDetailsData.companyFine"
                            :type="4"
                          />
                        </div>
                      </div>
                    </div>
                    <div class="f12" style="margin-top: 20px">
                      招聘数据来自国家大学生就业服务平台及各大招聘平台
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane
                  label="就业岗位"
                  name="jiuyegangwei"
                  v-if="isMyShowType != 2"
                >
                  <careertable :careerTableData="jboPositionData" :type="5" />
                </el-tab-pane>
                <el-tab-pane
                  label="企业招聘"
                  name="qiyezhaopin"
                  v-if="isMyShowType == 2"
                >
                  <enterprise-recruitment
                    :jobCompanyData="jobCompanyData"
                    v-loading="loading"
                  />
                  <pagination
                    v-show="total > 0"
                    v-model:page="requData.page"
                    v-model:limit="requData.pageSize"
                    :total="total"
                    :background="false"
                    @pagination="fetchCareerJobCompany"
                  ></pagination>
                </el-tab-pane>
                <!-- <el-tab-pane label="企业招聘" name="qiyezhaopin">
                  企业招聘
                </el-tab-pane> -->
                <!-- <el-tab-pane label="人才高校培养" name="peiyang"> </el-tab-pane> -->
              </el-tabs>
            </div>
          </div>

          <!-- <div v-if="isChildrenJorShow">
          <jor-library-children-det />
        </div> -->
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  getAllCareer,
  getCareerDetail,
  getCareerJobPosition,
  getCareerJobCompany,
} from '@/api/appv2/appv2';
import enterpriseRecruitment from '../EnterpriseRecruitment';
import mytitlebar from '../MyTitleBar.vue';
import careertable from '../CareerTable.vue';
import picChart from '../PicChart.vue';
import barChart from '../BarChart.vue';
const total = ref('');
const majorTitle = ref(['排位', '专业名称', '专业占比', '趋势']);
const porTitle = ref(['排位', '省份', '招聘人数', '占比', '薪资范围']);
const defaultProps = {
  children: 'children',
  label: 'name',
};
const isShow = ref(true);

const treeData = ref([]);
const firstMajor = ref([]);
const twoMajor = ref([]);
const firstPro = ref([]);
const twoPro = ref([]);
const jorDetailsData = ref({});
const foundItem = ref([]);
const activeName = ref('zhiyegaishu');

const expandedKeys = ref([]);
const jorPorpData = ref({});
const treeLoading = ref(false);
const handleNodeClick = () => {};

const handleTreeName = (node, data) => {
  let type = 0;
  if (node.level == 1) {
    return;
  } else {
    if (node.level == 2) {
      type = '1';
    } else if (node.level == 3) {
      type = '2';
    }
    handleInitMethod(data, type);
  }
};
const handleRedaMore = () => {
  isShow.value = !isShow.value;
};
const fetchAllCareer = () => {
  treeLoading.value = true;
  getAllCareer({ deep: 3 })
    .then((res) => {
      if (res.code == 20000) {
        treeLoading.value = false;
        treeData.value = res.data;
        if (jorPorpData.value.code) {
          foundItem.value = handleFindItem(
            treeData.value,
            jorPorpData.value.code
          );
        } else {
          foundItem.value = handleFindItem(
            treeData.value,
            jorPorpData.value.jobCode
          );
        }
      } else {
        treeLoading.value = false;
      }
    })
    .catch(() => {
      treeLoading.value = false;
    });
};
fetchAllCareer();
const jobCompanyData = ref([]);
const requData = ref({
  page: 1,
  pageSize: 10,
});
const loading = ref(false);
const fetchCareerJobCompany = () => {
  requData.value.code = jorPorpData.value.code || jorPorpData.value.jobCode;
  loading.value = true;
  getCareerJobCompany(requData.value)
    .then((res) => {
      if (res.code == 20000) {
        total.value = res.total;
        // isNoMore.value = res.data;
        jobCompanyData.value = res.data;
        loading.value = false;
        jobCompanyData.value.forEach((v) => {
          v.publishAt = v.publishAt.split('T')[0];
        });
      } else {
        loading.value = false;
      }
    })
    .catch(() => {
      loading.value = false;
    });
};

const fetchCareerDetail = () => {
  getCareerDetail({
    code: jorPorpData.value.code || jorPorpData.value.jobCode,
  }).then((res) => {
    if (res.code == 20000) {
      jorDetailsData.value = res.data;
      firstMajor.value = res.data.majorNeed.slice(0, 5);
      twoMajor.value = res.data.majorNeed.slice(5, 10);
      firstPro.value = res.data.demandNeed.slice(0, 5);
      twoPro.value = res.data.demandNeed.slice(5, 10);
    }
  });
};
// 使用 find() 方法查找匹配的数据项
const handleFindItem = (data, targetCode = []) => {
  const search = (data, targetCode, path) => {
    for (const item of data) {
      // 如果找到匹配项，则返回路径中的项
      if (item.code === targetCode) {
        return [...path, item];
      }
      // 如果有子项，则递归搜索
      if (item.children && item.children.length > 0) {
        const foundInChildren = search(item.children, targetCode, [
          ...path,
          item,
        ]);
        if (foundInChildren) {
          return foundInChildren;
        }
      }
    }
    // 如果未找到匹配项，则返回 null
    return null;
  };

  // 从根级数据开始搜索
  const pathToItem = search(data, targetCode, []);
  // 如果找到了目标项，则只返回目标项及其父级，不包含其他子项
  if (pathToItem) {
    const [targetItem, ...parents] = pathToItem;
    return [targetItem, ...parents];
  } else {
    return null;
  }
};
// 职业相关岗位
const jboPositionData = ref([]);
const fetchCareerJobPosition = () => {
  getCareerJobPosition({
    code: jorPorpData.value.code || jorPorpData.value.jobCode,
  }).then((res) => {
    if (res.code == 20000) {
      jboPositionData.value = res.data;
    }
  });
};
const isMyShowType = ref('');
const handleInitMethod = (data, isShowType) => {
  isMyShowType.value = isShowType;
  jorPorpData.value = data;
  expandedKeys.value.push(jorPorpData.value.code || jorPorpData.value.jobCode);
  //   if (isShowType == "2") {
  //     // isChildrenJorShow.value = true;
  //   } else {
  fetchCareerDetail();
  fetchCareerJobPosition();
  //   }
  fetchCareerJobCompany();
};
defineExpose({
  handleInitMethod,
});
</script>

<style lang="scss" scoped>
// margin-bottom: 300px;
.left-tree {
  // width: 260px;
  padding-right: 50px;
  margin-right: 30px;
  border: 1px solid #f2f2f2;
  height: calc(100vh - 155px);
  .careeTreeHead {
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;
  }
}
// .right-contaier {
//   background: #fff7f4;
//   height: 120px;
//   flex: 1;
//   .like-box {
//     padding: 15px;
//     height: 100%;
//     justify-content: space-between;
//   }
// }
.right-contaier {
  // background: #fff7f4;
  // height: 100%;
  height: calc(100vh - 155px);
  //   margin-bottom: 150px;
  flex: 1;
  .like-box {
    padding: 15px;
    height: 100%;
    background: #f5f9ff;
    justify-content: space-between;
  }
}
.treeActive {
  color: #409eff;
}
.read-more {
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff 60%, #fff);
  text-align: center;
  line-height: 36px;
  color: #333;
  font-size: 14px;
  padding-top: 50px;
  cursor: pointer;
}
.tabs-box {
  ::v-deep(.el-tabs__active-bar) {
    height: 0px !important;
  }
  ::v-deep(.el-tabs__nav-wrap::after) {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #409eff;
    z-index: var(--el-index-normal);
  }
  ::v-deep(.is-active) {
    background: #409eff;
    color: #fff;
    border-radius: 4px;
  }
  ::v-deep(.el-tabs__item) {
    padding: 0 30px !important;
  }
}
</style>
